<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.js"></script>
<div id="root">
	<div>
		<p>{{ total }}</p> 
		<button-counter v-on:increament="incrementTotal"></button-counter> 
		<button-counter v-on:increament="incrementTotal"></button-counter> 
	</div>
</div>
<script>
	//我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
	/**
	 * 使用 v-on 绑定自定义事件
	 * 每个 Vue 实例都实现了事件接口(Events interface)，即：
	 * 使用 $on(eventName) 监听事件
	 * 使用 $emit(eventName) 触发事件
	 * Note that Vue’s event system is separate from the browser’s EventTarget API. Though 
	 * they work similarly, $on and $emit are not aliases for addEventListener and 
	 * dispatchEvent.
	 * 另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
	 */
	Vue.component('button-counter',{
		template : '<button v-on:click="increament">{{ counter }}</button>',
		data : function(){
			return {
				counter : 0,
			};
		},
		methods : {
			increament : function(){//自定义一个事件，跟点击click有点相似
				this.counter += 1;
				this.$emit('increament');
				console.log(this);
			},
			watched : function(){
				console.log('counter 改变了');
				this.$on('watched');
			}
		}
	});
	var vm = new Vue({
		el : '#root',
		data : {
			total : 0,
		},
		methods : {
			incrementTotal : function(){
				this.total += 2;
			}
		}
	})
</script>	
</body>
</html>